<template>
  <div class="StudentTable">
    <el-table :data="tableData" style="width: 100%" :stripe="true">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="电话号"></el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="primary">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- Edit Modal -->
    <el-dialog title="编辑客服信息" :visible.sync="editDialogVisible">
      <el-form :model="editForm">
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话号">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'StudentTable',
  data() {
    return {
      editDialogVisible: false,
      editForm: {
        name: '',
        phone: '',
        id:''
      }
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    edit(row) {
      this.editForm = { ...row }; // Clone the row data into the form
      this.editDialogVisible = true; // Show the dialog
    },
    saveEdit() {
    // ...更新数据逻辑...
    request.post('/pcclinet/chanhecostomers', {
      id: this.editForm.id,
      name: this.editForm.name,
      phone: this.editForm.phone
    }).then(response => {
      //  console.log(response);
      this.$message.success('客服信息更新成功');
      this.editDialogVisible = false;
      this.$emit('updateTable'); // Emit an event to update the table data
    }).catch(error => {
      console.error(error);
      this.$message.error('客服信息更新失败');
    });

    this.editDialogVisible = false;
  }
  }
}
</script>

<style lang="scss" scoped>
a {
  color: $color-primary;
}
</style>
